<script setup lang="ts">
import { getBannerList } from '@/api/home'

import { onMounted, ref } from 'vue'

// 这里解构出的 Ref 是用来给 ref 创建数据添加类型用的
import type { Ref } from 'vue'

interface iBanner {
  alt: string
  bannerid: string
  flag: boolean
  img: string
  link: string
}

// 创建一个变量叫 bannerList，其类型是 Ref 类型，
// 内部有一个数组，数组内是 iBanner 类型的对象
const bannerList: Ref<iBanner[]> = ref([])

// 组合式 API 中的挂载之后的回调函数
onMounted(() => {
  // 发送数据请求获取轮播图数据
  getBannerList().then(res => {
    // console.log(res.data);
    bannerList.value = res.data
  })
})
</script>
<template>
  <div class="box">
    <header class="header"> 首页 </header>

    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
          <img :src="item.img" alt="">
        </van-swipe-item>
      </van-swipe>

    </div>
  </div>
</template>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 180px;
  height: 180px;
  text-align: center;
  background-color: #39a9ed;
}

.van-swipe-item img {
  width: 100%;
  height: 100%;
}
</style>
